<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 2.最顶级的一个dom，定义一个id -->
    <div id="app">
        <span>{{message}}</span>
        <span v-if="ifa">a</span>
        <span v-if="ifb">b</span>
        <span v-if="ifc">c</span>
        <span v-if="ifd">d</span>
        <ul>
            <li v-for="a in arraya">{{a}}</li>
        </ul>
        <ul>
            <li v-for="b in arrayb" :key="b.id">
                id是{{b.id}}, name是{{b.name}}
            </li>
        </ul>
        <input type="text" v-model="inputTextValue" >
        <button v-on:click="test1()">test1</button>
    </div>
</body>
<!--1.引入vuejs框架-->
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",//和最顶级的dom id要一致，#不要忘
        //这个最顶级的dom，内部的内容，使用vue框架支持的变量/方法，vue框架就可以渲染
        //data是定义new出来的vue对象中的变量
        data: {
            message: "hello",
            ifa: true,
            ifb: false,
            ifc: "abc",
            ifd: "",
            arraya: [1, 3, 65],
            arrayb: [
                {
                    id: 1,
                    name: "哈哈",
                },
                {
                    id: 2,
                    name: "呵呵",
                },
            ],
            inputTextValue: "文本框初始值",
        },
        methods: {
            test1: function(){
                // alert("test1")
                //将arrayb的值，修改：模拟从服务端获取响应数据来设置
                app.arrayb = [
                    {
                        id: 3,
                        name: "x",
                    },
                    {
                        id: 4,
                        name: "y",
                    },
                ];
            },
            test2(){
                alert("test2")
            }
        },
    });
</script>
</html>